<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta content="telephone=no" name="format-detection" />
	<!-- 留作将来统一添加 -->
	<TEMPLATE>${TEMPLATE}</TEMPLATE>
	<title>发布公告-展示</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css">
	<link rel="stylesheet" type="text/css" href="../../css/index.css">
	<link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
	<style type="text/css">
		body {
			background: rgba(255, 255, 255, 1);
		}

		.row {
			margin: 20px 15px;
		}

		.textarea {
			width: 100%;
			height: 200px;
			outline: none;
			line-height: 21px;
		}

		.textarea::placeholder {
			font-size: 15px;
			font-weight: 400;
			color: rgba(191, 191, 191, 1);
			line-height: 21px;
		}

		.text-length {
			font-size: 15px;
			font-weight: 400;
			color: rgba(191, 191, 191, 1);
		}

		.images {
			flex-wrap: wrap;
			overflow: hidden;
			padding: 0 7.5px;
		}

		.image {
			position: relative;
			width: 33.333%;
			height: 33vw;
			padding: 7.5px;
		}

		.close {
			position: absolute;
			right: 0;
			top: 0;
			width: 15px;
			height: 15px;
		}

		.add {
			height: 100%;
			background: rgba(235, 235, 235, 1);
		}

		.icon {
			width: 21px;
			height: 21px;
		}
	</style>
</head>

<body>
	<div class="vueApp" v-cloak>
		<div class="row">
			<textarea class="textarea" v-model="content" maxlength="200" placeholder="公告发布之后会@所有学生进行关注消息"></textarea>
		</div>
		<div class="row" data-flex="main:right cross:center">
			<div class="text-length">{{ contentLength }}/200</div>
		</div>
		<div class="images" data-flex>
			<div class="image" v-for="item,index in images">
				<img :src="item" alt="">
				<div class="close" @click="deleteImg(index)">
					<img src="../../image/ui/close.png" alt="">
				</div>
			</div>
			<div class="image" v-if="images.length < 6">
				<div class="add" data-flex="main:center cross:center" @click="uploadImg()">
					<div class="icon">
						<img src="../../image/ui/add_2.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-pic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
	// html 的引号一律为双引号(""),js 为单引号('')
	var USER, $S, vm;
	var maxUploadCount = 6;
	var currentUploadCount = 0;
	var param = {};
	apiready = function () {
		$S = SERVICE();
		USER = USER();
		fnInitAliYunOss();
		api.addEventListener({
			name: 'uploadSuccess'
		}, function (ret) {
			// 拿到上传完成后的图片列表
			var imgs = ret.value.imgs;
			vm.images = vm.images.concat(imgs);
			currentUploadCount = vm.images.length;
		})
		console.log(JSON.stringify(api.pageParam) + '=====pageParam');
		param = api.pageParam
		fnInit();
	};

	// 初始化
	function fnInit() {
		vm = new Vue({
			el: '.vueApp',
			data: {
				content: '',
				images: []
			},
			computed: {
				contentLength: function () {
					return this.content.length;
				}
			}
		});
	}

	function headerFn() {
        if(vm.content === '') {
            fnToast('公告内容不能为空');
            return;
        }
		var url = 'clsClass/publishNotice';
		var params = {
			"classesId": param.classesId,
			"content": vm.content,
			"url": vm.images.toString()
		};
		var callback = function (data) {
			fnToast('发布成功');
            api.sendEvent({
                name: 'classNoticeChange'
            });
			api.closeWin();
			// status 为200时,只返回data
		};
		var error = function (res) {
			// status 不是200时,全部返回
			api.refreshHeaderLoadDone();
		};
		POST(url, params, callback, error);
	}

	function uploadImg() {
		fnUploadImg(maxUploadCount - currentUploadCount, 'uploadSuccess');
	}

	function deleteImg(index) {
		vm.images.splice(index,1);
		currentUploadCount -= 1;
	}	
</script>

</html>